import React, { FC, useState } from 'react';
import classes from 'classnames';
import StyledPanel from '@/components/containers/styledPanel';
import controlHeightUtil from '@/utils/analysis/control-height';
import './index.less';
import { useEffectOnce } from 'react-use';
import GeoExtrude3DSymbol from '@/core/smart-mapping/symbols/GeoExtrude3DSymbol';

export interface ControlHeightPropTypes {
  onClose: () => void;
}

const ControlHeight: FC<ControlHeightPropTypes> = ({ onClose }) => {
  const [layerId, setLayerId] = useState();
  const [oid, setOid] = useState();
  const [catching, setCatching] = useState(false);

  function handleCatchBuilding() {
    if (catching) return;

    setCatching(true);
    controlHeightUtil.active();
  }

  function handleCancelCatching() {
    if (catching) {
      setCatching(false);
      controlHeightUtil.deactive();
    }
  }

  useEffectOnce(() => {
    controlHeightUtil.on('draw', evt => {
      const { status, graphic } = evt;

      setCatching(false);
      if (status === 'complete') {
        if (window.agsGlobal && window.agsGlobal.view) {
          window.agsGlobal.view.map.graphics.removeAll();
          graphic.symbol = new GeoExtrude3DSymbol().toEsriSymbolObject();
          window.agsGlobal.view.map.graphics.add(graphic);
        }
      }
    });
  });

  return (
    <div className="geomap-widget-control-height">
      <StyledPanel>
        <div className="geomap-widget-control-height__content">
          <div className="geomap-widget-control-height__content-title">
            控高分析
            <span
              className="geomap-widget-control-height__content-close"
              onClick={(): void => onClose && onClose()}
            >
              ×
            </span>
          </div>
          <div className="esri-sketch__section esri-sketch__tool-section">
            <button
              className={classes('esri-sketch__button', {
                active: catching,
              })}
              onClick={handleCatchBuilding}
            >
              <span className="esri-icon-cursor"></span> 选择建筑物
            </button>
            <button className="esri-sketch__button" onClick={handleCancelCatching}>
              <span className="esri-icon-trash"></span> 取消选择
            </button>
          </div>
          {layerId && oid ? <span>已选中建筑物</span> : <span></span>}
        </div>
      </StyledPanel>
    </div>
  );
};

export default ControlHeight;
